<!-- 小程序配置 -->
<template>
  <div class="page-box h100 display-flex czbj dfddsrttre">
    <div class="from-box-ks">
      <n-form
        :label-width="200"
        label-placement="left"
        :model="res"
        class="mt20"
        :rules="rules"
        ref="formRef"
      >
        <n-form-item label="AppID(小程序ID)：" path="AppID">
          <n-input placeholder="请输入AppID" v-model:value="res.AppID" />
          <div class="iconfont dx-help z9 fz18 sz question-mark-icon">
            <n-image
              src="https://duxinggj-1251133427.cos.ap-guangzhou.myqcloud.com/adminimg/appid.png"
              class="imgsjnnee"
            />
          </div>
        </n-form-item>
        <n-form-item label="AppSecret(小程序密钥)：" path="AppSecret">
          <n-input
            placeholder="请输入AppSecret"
            v-model:value="res.AppSecret"
          />
          <div class="iconfont dx-help z9 fz18 sz question-mark-icon">
            <n-image
              src="https://duxinggj-1251133427.cos.ap-guangzhou.myqcloud.com/adminimg/appid.png"
              class="imgsjnnee"
            />
          </div>
        </n-form-item>
        <n-form-item label="二维码类型：">
          <n-radio-group v-model:value="res.qrCodeType" name="radiogroup">
            <n-space class="mt2">
              <n-radio value="release"> 正式版 </n-radio>
              <n-radio value="trial"> 体验版为 </n-radio>
              <n-radio value="develop">开发版为 </n-radio>
            </n-space>
          </n-radio-group>
        </n-form-item>
        <n-form-item label="&nbsp;">
          <n-button
            type="primary"
            size="medium"
            class="save-btn"
            @click="saveFun"
            >保存</n-button
          >
        </n-form-item>
      </n-form>
    </div>
  </div>
</template>
 <script lang='ts' setup>
import { dxget, dxpost } from "../../util";
import { ref } from "vue";
const showModal = ref(false);
const qrcodeType = ref("release");
const res = ref({
  AppID: "",
  AppSecret: "",
  qrCodeType: "",
});
const formRef = ref(null);
const rules = {
  AppID: [
    {
      required: true,
      message: "请输入AppID",
    },
  ],
  AppSecret: [
    {
      required: true,
      message: "请输入AppSecret",
    },
  ],
};
const init = async () => {
  const { data }: any = await dxget("dxgjAdmin/AppletsManagement", { id: 1 });
  res.value = data;
};
init();

const saveFun = async () => {
  formRef.value?.validate(async (errors) => {
    if (!errors) {
      const { data }: any = await dxpost(
        "dxgjAdmin/AppletsManagement",
        res.value,
        "PUT"
      );
      if (data.affectedRows == 1) {
        window.$message.success("保存成功！");
      }
    } else {
      console.log(errors);
    }
  });
};
</script>
 <style scoped>
.from-box-ks {
  max-width: 560px;
}
.question-mark-icon {
  position: absolute;
  right: -40px;
  top: 0;
  width: 20px;
  height: 20px;
}
.imgsjnnee {
  opacity: 0;
}
.imgsjnnee {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 99;
}
.save-btn {
  width: 120px;
}
</style>